<template>
    <div>
      <el-row>
        <el-col class="img-top">
          <img src="@/assets/myorder.png" alt="">
        </el-col>
      </el-row>
      <div v-for="(order,index) in orderList" :key="index" class="orderbox">
        <p class="time"><i class="el-icon-time"></i>
          {{`${new Date(order[0].ordertime).getFullYear()}年${new Date(order[0].ordertime).getMonth()+1}月${new Date(order[0].ordertime).getDate()}日
            ${new Date(order[0].ordertime).getHours()}:${new Date(order[0].ordertime).getMinutes() < 10 ? '0'+new Date(order[0].ordertime).getMinutes() :new Date(order[0].ordertime).getMinutes() }`}}
        </p>
        <el-table
          :data="order"
          tooltip-effect="dark"
          style="width: 100%"
          >
          <el-table-column
            label="商品信息"
            width="380">
            <template slot-scope="scope">
              <img :src="scope.row.product_img" alt="" class="shoppingcatstoreImg">
              <span class="storeinfo">{{ scope.row.product_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="单价"
            width="140">
            <template slot-scope="scope">
              <p style="color:red;" v-if="scope.row.price.indexOf('.') !== -1">￥{{ scope.row.price}}</p>
              <p style="color:red;" v-else>￥{{ scope.row.price}}.00</p>
            </template>
          </el-table-column>
          <el-table-column
          prop="num"
            label="下单数量"
            width="140">
          </el-table-column>
          <el-table-column
            label="实付款"
            width="140">
            <template slot-scope="scope">
              <p style="color:red;" v-if="scope.row.price.indexOf('.') !== -1">￥{{ scope.row.price * scope.row.num}}</p>
              <p style="color:red;" v-else>￥{{ scope.row.price * scope.row.num}}.00</p>
            </template>
          </el-table-column>
          <el-table-column
            label="交易操作"
            width="140">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="confirmorder(scope.row.price,scope.row.num,scope.row.status)">
                <p v-if="scope.row.status">确认收货</p>
                <p v-else>已收货</p>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
</template>

<script>
export default {
  name: 'my-order',
  data () {
    return {
      orderList: []
    }
  },
  mounted () {
    this.orderList = this.$store.state.myOrder
  },
  methods: {
    timeToNum (time) {
      return new Date(time).getTime()
    },
    confirmorder (price, num, status) {
      if (!status) {
        this.$confirm(`点击确定后,您之前付款的${price * num}元将直接到卖家帐户里,请务必收到货再确认!`, '确认收货', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '已确认收货!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消收货!'
          })
        })
      } else {
        this.$notify.info({
          title: '提示',
          message: '您已确认收货，请勿重复操作！'
        })
      }
    }
  }
}
</script>

<style scoped>
.img-top {
  display: flex;
  justify-content: center;
}
.img-top img{
  width: 450px;
  height: 60px;
}
.el-table {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
 .shoppingcatstoreImg {
    display: inline-block;
    width: 120px;
    height: 120px;
    margin-right: 10px;
  }
  .storeinfo {
    position:absolute;
    top: 20;
  }
  .orderbox {
    box-shadow: 0px 3px rgba(0, 0, 0, 0.5);
  }
</style>
